<template>
    <div class="changeDetailg">
        <div>
            <div style="height:40px;">
                <el-button size="mini" style="float:right;" @click="$router.go(-1)">返回</el-button>
            </div>
            <p>变更信息</p>
            <hr>
            <el-form ref="baseForm" class="baseForm" :model="baseForm">
                <div style="display:flex">
                    <el-form-item label="变更内容" />
                    <el-form-item label="原信息" />
                    <el-form-item label="申请变更信息" v-if="status==='1'" />
                </div>
                <div style="display:flex">
                    <el-form-item label="证件类型：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.settlementPersonCardCode+''" />
                    <el-form-item prop="newSettlementInfo.settlementPersonCardCode" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.settlementPersonCardCode"
                            placeholder="结算人身份证号码：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="结算人名称：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.settlementPersonName+''" />
                    <el-form-item prop="newSettlementInfo.settlementPersonName" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.settlementPersonName" placeholder="结算人名称：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="结算人证件有效期：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.settlementPersonCardValidity+''" />
                    <el-form-item prop="newSettlementInfo.settlementPersonCardValidity" v-if="status==='1'">
                        <div style="display: flex;justify-content: space-between;">
                            <el-checkbox v-model="checked">长期</el-checkbox>
                            <!-- <el-input v-model="baseForm.newSettlementInfo.settlementPersonCardValidity" placeholder="结算人证件有效期：" /> -->
                            <el-date-picker
                                v-model="baseForm.newSettlementInfo.settlementPersonCardValidity"
                                type="date"
                                placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                >
                            </el-date-picker>
                        </div>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="结算类型：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.billingType=='1'?'法人对私':baseForm.oldSettlementInfo.billingType=='2'?'非法人对私':'对公'" />
                    <el-form-item prop="newSettlementInfo.billingType" v-if="status==='1'">
                        <el-select v-model="baseForm.newSettlementInfo.billingType" placeholder="结算类型"
                            style="width:300px">
                            <el-option label="对公" value="0" />
                            <el-option label="法人对私" value="1" />
                            <el-option label="非法人对私" value="2" />
                        </el-select>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="银行开户号：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankAccountCode+''" />
                    <el-form-item prop="newSettlementInfo.bankAccountCode" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.bankAccountCode" placeholder="银行开户号：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="银行开户名：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankAccountName+''" />
                    <el-form-item prop="newSettlementInfo.bankAccountName" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.bankAccountName" placeholder="银行开户名：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="结算开户行地址：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankAddress+''" />
                    <el-form-item prop="newSettlementInfo.bankAddressCode" v-if="status==='1'">
                        <el-cascader style="width:100%;" :props="dataTree"
                            v-model="baseForm.newSettlementInfo.bankAddressCode">
                        </el-cascader>
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="支行信息：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankBranch+''" />
                    <el-form-item prop="newSettlementInfo.bankBranch" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.bankBranch" placeholder="支行信息：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="银行信息：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankInfo+''" />
                    <el-form-item prop="newSettlementInfo.bankInfo" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.bankInfo" placeholder="银行信息：" />
                    </el-form-item>
                </div>
                <div style="display:flex">
                    <el-form-item label="银行预留手机号：" />
                    <el-form-item :label="baseForm.oldSettlementInfo.bankPhoneNum+''" />
                    <el-form-item prop="newSettlementInfo.bankPhoneNum" v-if="status==='1'">
                        <el-input v-model="baseForm.newSettlementInfo.bankPhoneNum" placeholder="银行预留手机号：" />
                    </el-form-item>
                </div>       
                <div class="basePicture">
                    <p>商户照片</p>
                    <hr>
                    <div class="pitures" style="display:flex;flex-wrap:wrap;margin-left:50px;">
                        <div v-for="v of imagesData" :key="v.label" class="pitures-box">
                            <div style="margin-right:20px"  v-if="v.url">
                                <p class="pitures-label" :style="{lineHeight: v.textType ? '20px' : '40px'}">{{ v.label
                                    }}</p>
                                <img :src="v.url" style="width:150px;height:150px" />
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <!-- <el-form-item label="变更描述：" prop="newSettlementInfo.changeDesc" v-if="status==='1'" :rules="[{ required: true, message: '变更描述：' }]">
                        <el-input v-model="baseForm.newSettlementInfo.changeDesc" type="textarea" maxlength="100"
                            placeholder="请填写更改备注" :autosize="{ minRows: 4, maxRows: 6 }" />
                    </el-form-item> -->
                    <el-form-item label="审核意见" prop="remark" :rules="[{ required: true, message: '审核意见' }]"
                        v-if="status==='3'">
                        <el-input v-model="baseForm.remark" type="textarea" maxlength="100" placeholder="请填写审核意见"
                            :autosize="{ minRows: 4, maxRows: 6 }" />
                    </el-form-item>
                </div>
                <div>
                    <el-form-item class="btn-group" v-if="status==='1'">
                        <el-button type="primary" @click="submitForm('baseForm')">确定</el-button>
                        <el-button @click="close">取消</el-button>
                    </el-form-item>
                    <el-form-item class="btn-group" v-if="status==='3'">
                        <el-button type="primary" @click="onSubmit('baseForm', 1)">审核通过</el-button>
                        <el-button type="primary" @click="onSubmit('baseForm', 0)">审核驳回</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import pictureDialog from './img.vue';
    import datePicker from "@/components/model/component/date-picker/startEndTime.vue";
    import { sysAjax } from "Ajax";
    export default {
        components: {
            pictureDialog
        },
        props: {
            visible: {
                type: Boolean,
                default: false
            },
            baseData: {
                type: Object,
                default: function () {
                    return {}
                }
            }
        },
        data() {
            return {
                baseForm: {
                    // zpl: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&fm=26&gp=0.jpg',
                    // businessLicense: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1483731740,4186543320&fm=26&gp=0.jpg',
                    oldSettlementInfo: {},
                    newSettlementInfo: {},
                    remark: '',//审核,
                    checked:false,//长期
                },
                imagesData: [],
                status: this.$route.query.status ? this.$route.query.status : '',
                shRemark: {},//审核信息

            }
        },
        mounted() {
            // this.baseForm = this.baseData
        },
        created() {
            this.$route.query.id && this.queryPage();
            this.$route.query.code && this.squeryPage();
            this.dataTree = {
                lazy: true,
                lazyLoad(node, resolve) {
                    let obj = {
                        areaLevel: node.level ? node.level + 1 : 1,
                        areaParentCode: node.value ? node.value : null
                    };
                    sysAjax.merchantInfOelectAreaInfo(obj).then(data => {
                        for (let i in data) {
                            data[i].label = data[i].areaName;
                            data[i].value = data[i].areaCode;
                            data[i].leaf = node.level >= 2
                        }
                        resolve(data)
                    });
                }
            };
        },
        methods: {
            // selectMerchantSettlementInfo
            squeryPage() {  // 新增时商户的结算信息
                console.log("新增时商户的基本信息")
                this.loading = true;
                sysAjax.selectMerchantInfo(
                    { code: this.$route.query.code }
                ).then(response => {
                    console.log(response, '新增基本信息122')
                    // this.pageTableData = response.list;
                    this.baseForm.oldSettlementInfo = response;
                    this.imagesData = [
                        {
                            label: "银行卡正面",
                            url: response.bankCardFirstImg
                        },
                        {
                            label: "银行卡反面",
                            url: response.bankCardSecondImg
                        },
                        {
                            label: "结算人身份证正面",
                            url: response.settlementPersonCardFirstImg
                        },
                        {
                            label: "结算人身份证反面",
                            url: response.settlementPersonCardSecondImg
                        },
                    ]
                    this.loading = false;
                });
            },
            // 新增结算信息
            queryPage() {
                // console.log("商户的基本信息")
                this.loading = true;
                sysAjax.selectMerchantSettlementInfo(
                    { id: parseInt(this.$route.query.id) }
                ).then(response => {
                    console.log(response, '基本信息')
                    // this.pageTableData = response.list;
                    this.baseForm = response;
                    this.imagesData = [
                        {
                            label: "银行卡正面",
                            url: response.oldSettlementInfo.bankCardFirstImg
                        },
                        {
                            label: "银行卡反面",
                            url: response.oldSettlementInfo.bankCardSecondImg
                        },
                        {
                            label: "结算人身份证正面",
                            url: response.oldSettlementInfo.settlementPersonCardFirstImg
                        },
                        {
                            label: "结算人身份证反面",
                            url: response.oldSettlementInfo.settlementPersonCardSecondImg
                        },
                    ]
                    this.loading = false;
                });
            },
            close() {
                // this.$emit('update:visible', false)
                this.$router.go(-1)
            },
            // submitForm(formName) {
            //     // this.$refs[formName].validate(valid => {
            //     //     if (valid) {
            //     //         // this.$emit("refresh");

            //     //     }
            //     // })

            // },
            submitForm(formName) {
                if (!this.baseForm.newSettlementInfo && this.baseData.newSettlementInfo.length == 0) {
                    return;
                }
                if (this.baseForm.newSettlementInfo.bankAddressCode) {
                    this.baseForm.newSettlementInfo.bankAddressCode = this.baseForm.newSettlementInfo.bankAddressCode.length ? this.baseForm.newSettlementInfo.bankAddressCode.toString() : ''
                }
                if (this.baseForm.newSettlementInfo.billingType) {
                    this.baseForm.newSettlementInfo.billingType = parseInt(this.baseForm.newSettlementInfo.billingType)
                }
                if (this.baseForm.checked){//长期
                    this.baseForm.newSettlementInfo.checked = this.baseForm.checked
                }
                console.log(this.baseForm.oldSettlementInfo, '旧值')
                this.baseForm.newSettlementInfo.code = this.baseForm.oldSettlementInfo.code
                console.log(this.baseForm.newSettlementInfo, 'xiugaitijiaoshuju')
                sysAjax.updateMerchantSettlementInfo(
                    this.baseForm.newSettlementInfo
                ).then(response => {
                    console.log(response, '新增')
                    this.loading = false;
                    this.$router.push("/merchant/change");
                    // this.baseForm.newSettlementInfo = this.baseData;
                });
                this.baseForm.newSettlementInfo = this.baseData
            },
            onSubmit(formName, state) {//审核
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        this.shRemark = {
                            code: this.baseForm.oldSettlementInfo.code,
                            state: state,
                            remark: this.baseForm.remark,
                            name: this.baseForm.oldSettlementInfo.name,
                        }
                        if (this.$route.query.id) {
                            this.shRemark.id = parseInt(this.$route.query.id)
                        }
                        console.log(this.shRemark)
                        sysAjax.verifyMerchantChangeInfo(this.shRemark).then(res => {
                            if (res.ok) {
                                this.$router.go(-1)
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
        }
}
</script>
<style lang="scss" scoped>
    .changeDetailg{
        flex-direction: column;
        padding: 20px;
        width: 100%;
    }
</style>
<style lang="scss">
    .baseForm {
        padding: 30px 80px 30px 10px;

        .el-form-item {
            width: 30%
        }
    }

    .basePicture {
        .el-form-item {
            width: 250px !important;

            .el-form-item__label {
                float: none
            }

            .fileEdit {
                position: absolute;
                left: 10px;
                top: 0;
            }
        }
    }

    .btn-group {
        text-align: center;

        .el-form-item__content {
            display: flex;
            justify-content: space-between;
        }
    }
</style>